<template>
  <JVxeTable
    ref="tableRef"
    toolbar
    row-number
    row-selection
    keep-source
    :height="484"
    :loading="loading"
    :dataSource="dataSource"
    :columns="columns"
    :pagination="pagination"
    style="margin-top: 8px"
    @pageChange="handlePageChange"
  >
<!--    <template #toolbarSuffix>-->
<!--      <a-button @click="handleTableGet">获取数据</a-button>-->
<!--    </template>-->
    <template #myAction="props">
      <a @click="handleDownloadByUrl(props)">查看</a>
    </template>
  </JVxeTable>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  // noinspection ES6UnusedImports
  import { Popconfirm } from 'ant-design-vue';
  import { JVxeColumn, JVxeTableInstance, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { random } from 'lodash-es';
  import { buildUUID } from '/@/utils/uuid';
  import { uploadUrl } from '/@/api/common/api';
  import { downloadByUrl} from '/@/utils/file/download';

  const tableRef = ref<JVxeTableInstance>();
  const { createMessage } = useMessage();
  const loading = ref(false);
  const columns = ref<JVxeColumn[]>([
    // {
    //   title: '下拉框_字典表搜索',
    //   key: 'select_dict_search',
    //   type: JVxeTypes.selectDictSearch,
    //   width: 200,
    //   async: true, // 异步搜索，默认为 true
    //   // 字典表配置信息：数据库表名,显示字段名,存储字段名
    //   dict: 'sys_user,realname,username',
    //   tipsContent: '请输入查询条件',
    // },
    // {
    //   title: 'JPopup',
    //   key: 'popup',
    //   type: JVxeTypes.popup,
    //   width: 180,
    //   popupCode: 'demo',
    //   // field: 'name,sex,age',
    //   // orgFields: 'name,sex,age',
    //   // destFields: 'popup,popup_sex,popup_age',
    //   fieldConfig: [
    //     { source: 'name', target: 'popup' },
    //     { source: 'sex', target: 'popup_sex' },
    //     { source: 'age', target: 'popup_age' },
    //   ],
    // },
    // {
    //   title: 'JP-性别',
    //   key: 'popup_sex',
    //   type: JVxeTypes.select,
    //   dictCode: 'sex',
    //   disabled: true,
    //   width: 100,
    // },
    // {
    //   title: '用户选择',
    //   key: 'userSelect',
    //   type: JVxeTypes.userSelect,
    //   width: 240,
    // },
    // {
    //   title: '部门选择',
    //   key: 'departSelect',
    //   type: JVxeTypes.departSelect,
    //   width: 240,
    // },
    // {
    //   title: '单选',
    //   key: 'radio',
    //   type: JVxeTypes.radio,
    //   width: 130,
    //   options: [
    //     { text: '男', value: '1' },
    //     { text: '女', value: '2' },
    //   ],
    //   // 允许清除选择（再点一次取消选择）
    //   allowClear: false,
    // },
      {
          title: 'Budget Period',
          key: 'period',
          type: JVxeTypes.normal,
          width: 120,
      },
      {
          title: 'Division',
          key: 'division',
          type: JVxeTypes.normal,
          width: 80,
      },
      {
          title: 'Version',
          key: 'version',
          type: JVxeTypes.normal,
          width: 80,
      },
    {
      title: 'Upload',
      key: 'upload',
      type: JVxeTypes.file,
      width: 220,
      btnText: 'upload',
      token: true,
      responseName: 'message',
      action: uploadUrl,
    },
    // {
    //   title: '图片上传',
    //   key: 'image',
    //   type: JVxeTypes.image,
    //   width: 180,
    //   maxCount: 6,
    // },
    {
      title: '文件上传',
      key: 'img',
      type: JVxeTypes.slot,
      width: 220,
      slotName:'myAction' ,

    },
    // {
    //   title: '进度条',
    //   key: 'progress',
    //   type: JVxeTypes.progress,
    //   minWidth: 320,
    // },
  ]);
  const dataSource = ref<any[]>([]);
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    pageSizeOptions: ['10', '20', '30', '100', '200'],
    total: 30,
  });

  // randomPage(pagination.current, pagination.pageSize, true);

  // 当分页参数变化时触发的事件
  function handlePageChange(event) {
    // 重新赋值
    pagination.current = event.current;
    pagination.pageSize = event.pageSize;
    // 查询数据
    randomPage(event.current, event.pageSize, true);
  }

  /** 获取值，忽略表单验证 */
  function handleTableGet() {
    const values = tableRef.value!.getTableData();
    console.log('获取值:', { values });
    createMessage.success('获取值成功，请看控制台输出');
  }

  /* 随机生成分页数据 */
  function randomPage(current, pageSize, $loading = false) {
    if ($loading) {
      loading.value = true;
    }
    let begin = Date.now();
    let values: any[] = [];
    for (let i = 0; i < pageSize; i++) {
      let radio = random(0, 2);
      values.push({
        id: buildUUID(),
        select_dict_search: ['admin', '', 'jeecg'][random(0, 2)],
        progress: random(0, 100),
        radio: radio ? radio.toString() : null,
      });
    }
    dataSource.value = values;
    let end = Date.now();
    let diff = end - begin;
    if ($loading && diff < pageSize) {
      setTimeout(() => (loading.value = false), pageSize - diff);
    }
  }

  function handleDownloadByUrl(props) {
      createMessage.success('请在控制台查看输出');
      // 参数介绍：
      // props.value          当前单元格的值
      // props.row            当前行的数据
      // props.rowId          当前行ID
      // props.rowIndex       当前行下标
      // props.column         当前列的配置
      // props.columnIndex    当前列下标
      // props.$table         vxe实例，可以调用vxe内置方法
      // props.target         JVXE实例，可以调用JVXE内置方法
      // props.caseId         JVXE实例唯一ID
      // props.scrolling      是否正在滚动
      // props.triggerChange  触发change事件，用于更改slot的值
      console.log('查看: ', { props });
      downloadByUrl({
          url: 'https://codeload.github.com/anncwb/vue-Jeecg-admin-doc/zip/master',
          target: '_self',
      });
  }
</script>
